<template>
  <div>
    <div style="height: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">试卷管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-col style="display: flex">
      <div style="flex: 1;margin-top: 10px">

        <span><i style="font-size: 20px">新建试卷:</i></span>
        <el-button @click="FormVisible = 1" style="margin-left: 10px">一键生成试卷</el-button>
        <el-button @click="FormVisible = 2">手动生成试卷</el-button>
        <span><i style="font-size: 20px;margin-left: 10px">试卷列表:</i></span>
        <el-button @click="lookPaper" style="margin-left: 10px">查看试卷</el-button>

        <div v-show="FormVisible==1?true:false" style="margin-top: 8px">
          <el-form :model="paper">
            <el-form-item label="试卷编号" :label-width="formLabelWidth">
              <el-input v-model="paper.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="exit">取 消</el-button>
              <el-button type="primary" @click="submitAuto">确 定</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div v-show="FormVisible==2?true:false" style="margin-top: 8px">
          <el-form :model="paper">
            <el-form-item label="试卷编号" :label-width="formLabelWidth">
              <el-input v-model="paper.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择题库" :label-width="formLabelWidth">
              <el-select v-model="library" multiple placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单选题个数" :label-width="formLabelWidth">
              <el-input v-model="nums.single" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="多选题个数" :label-width="formLabelWidth">
              <el-input v-model="nums.multiple" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="判断题题个数" :label-width="formLabelWidth">
              <el-input v-model="nums.estimate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="填空题个数" :label-width="formLabelWidth">
              <el-input v-model="nums.gpa" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="问答题个数" :label-width="formLabelWidth">
              <el-input v-model="nums.essay" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="exit">取 消</el-button>
            <el-button type="primary" @click="submitHand">确 定</el-button>
          </div>
        </div>
        <div v-show="FormVisible==3?true:false" style="margin-top: 8px">
          <el-table
            :data="paperList"
            style="width: 100%">
            <el-table-column
              label="试卷编号"
              width="750">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="look(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div style="flex: 1;margin-left: 20px;margin-top: 10px">
        <span><i style="font-size: 20px">试卷预览:</i></span>
        <div style="margin-top: 22px;background-color: white">
          <div >
            <div v-for="(item,index) in paperDetails.single" :key="index"><br>
                <span>{{item.details}}</span><br>

                <span>{{item.answer}}</span><br>

                <span>{{item.option.ad}}</span><br>
                <span>{{item.option.bd}}</span><br>
                <span>{{item.option.cd}}</span><br>
                <span>{{item.option.dd}}</span><br>
                <span>{{item.option.ed}}</span><br>
                <span>{{item.option.fd}}</span><br>
                <span>{{item.option.gd}}</span><br>
            </div>
          </div>
          <div>
            <div v-for="(item,index) in paperDetails.multiple" :key="index"><br>
                <span>{{item.details}}</span><br>

                <span>{{item.answer}}</span><br>

                <span>{{item.option.ad}}</span><br>
                <span>{{item.option.bd}}</span><br>
                <span>{{item.option.cd}}</span><br>
                <span>{{item.option.dd}}</span><br>
                <span>{{item.option.ed}}</span><br>
                <span>{{item.option.fd}}</span><br>
                <span>{{item.option.gd}}</span><br>
            </div>
          </div>
          <div>
            <div v-for="(item,index) in paperDetails.estimate" :key="index"><br>
              <span>{{item.details}}</span><br>

              <span>{{item.answer}}</span><br>
            </div>
          </div>
          <div>
            <div v-for="(item,index) in paperDetails.gpa" :key="index"><br>
                <span>{{item.details}}</span><br>

                <span>{{item.answer}}</span><br>
            </div>
          </div>
          <div>
            <div v-for="(item,index) in paperDetails.essay" :key="index"><br>
                <span>{{item.details}}</span><br>

                <span>{{item.answer}}</span><br>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </div>

</template>

<script>
  export default {
    name: "paperManage",
    data() {
      return {
        FormVisible: 0,
        //传入试卷id
        paper: {
          id: ""
        },
        //传入选择的题库id
        library: [],
        //传入题库题目数量
        nums: {
          single: "",
          multiple: "",
          estimate: "",
          gpa: "",
          essay: ""
        },
        num: [1, 2, 3, 4, 5],
        //下拉选择题库
        options: [
          {},
        ],
        datas: {
          paperId: 0,
          lids: "",
          nums: ""
        },
        formLabelWidth: "120px",
        paperList: [],
        paperDetails:{
          single:[{
            answer: '',
            details: '',
            difficulty: 0,
            lid: 10,
            op: [],
            option: '',
            qid: 0,
            score: 0,
            source: 0,
            type: 0,
          }],
          multiple: [{
            answer: '',
            details: '',
            difficulty: 0,
            lid: 10,
            op: [],
            option: '',
            qid: 0,
            score: 0,
            source: 0,
            type: 0,
          }],
          estimate: [{
            answer: '',
            details: '',
            difficulty: 0,
            lid: 10,
            op: [],
            option: '',
            qid: 0,
            score: 0,
            source: 0,
            type: 0,
          }],
          gpa: [{
            answer: '',
            details: '',
            difficulty: 0,
            lid: 10,
            op: [],
            option: '',
            qid: 0,
            score: 0,
            source: 0,
            type: 0,
          }],
          essay: [{
            answer: '',
            details: '',
            difficulty: 0,
            lid: 10,
            op: [],
            option: '',
            qid: 0,
            score: 0,
            source: 0,
            type: 0,
          }]
        },
      };
    },
    mounted() {
      this.getLibrary();
    },
    methods: {
      async getLibrary() {
        let res = await this.$API.getLibraryList();
        this.options = res.data;
        console.log(res);
      },
      exit() {
        this.FormVisible = 0;
        this.paper = {};
        this.library = [];
        this.nums = {};
      },
      //自动生成试卷
      async submitAuto() {
        this.FormVisible = 0;
        let res = await this.$API.newPaperAuto(this.paper.id);
        console.log(res);
      },
      //手动生成试卷
      async submitHand() {
        this.FormVisible = 0;
        this.num = [this.nums.single, this.nums.multiple, this.nums.estimate, this.nums.gpa, this.nums.essay];
        this.datas.paperId = this.paper.id;
        this.datas.lids = this.library.toString();
        this.datas.nums = this.num.toString();
        console.log(this.datas);
        let res = await this.$API.newPaperHand(this.datas);
        console.log(res);
        this.library = [];
        this.nums = {};
        this.paper = {};
      },
      async lookPaper() {
        this.FormVisible = 3;
        let res = await this.$API.getPaperList();
        console.log(res);
        this.paperList = res.data;
      },
      async look(paperId){
        this.paperDetails=[];
        console.log(paperId);
        let res = await this.$API.getPaperDeatils(paperId);
        console.log(res.data);
        this.paperDetails = res.data;
      }
    }
  };
</script>

<style scoped>

</style>